<template>
  <div class="card" :class="cardClass">
    <div class="card__header">
      <div class="card__title"
        v-if="title"
        :class="[`mb-${desc?'2':'4'}`]"
      >
        {{ title }}
      </div>

      <div class="card__desc" v-if="desc">
        {{ desc }}
      </div>
    </div>

    <div class="card__body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'ArkCard',
  props: {
    dark: {
      type: Boolean,
      default: false,
    },
    shadow: {
      type: Boolean,
      default: true,
    },
    blur: {
      type: Boolean,
      default: true,
    },
    hover: {
      type: Boolean,
      default: false,
    },
    active: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    desc: {
      type: String,
    },
  },
  computed: {
    cardClass() {
      return {
        'card-dark': this.dark,
        'card-shadow': this.shadow,
        'card-blur': this.blur,
        'card-hover': this.hover,
        'card-active': this.active,
        'card-disabled': this.disabled,
      };
    }
  }
});
</script>

<style scoped>
.card {
  @apply bg-white py-6 px-5 flex flex-col relative rounded-[20px];
  transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);

  .card__header {
    .card__title {
      @apply font-semibold text-xl;
    }

    .card__desc {
      @apply text-base mb-4;
    }
  }

  .card__body {
    @apply flex-1;
  }
}

.card-dark {
  @apply !bg-gray-400;

  .card__header {
    @apply text-[#FFFFFFD8];
  }
}

.card-shadow {
  box-shadow: 2px 4px 12px #00000014;

  &:hover, &:active {
    box-shadow: 2px 4px 16px #00000028;
  }
}

.card-blur {
  @apply bg-[#FFFFFFB7];
  backdrop-filter: saturate(180%) blur(20px);
}

.card-hover {
  &:hover {
    transform: scale3d(1.01, 1.01, 1.01);
  }
}

.card-active {
  &:active {
    transform: scale3d(0.97, 0.97, 0.97);
  }
}

.card-disabled {
  @apply cursor-not-allowed opacity-50;
}
</style>
